<template>
	<view>
		<view class="top_up">
			<view class="top">充值金额</view>
			<view class="money-body">
				<view class="icon">
					￥
				</view>
				<view class="input">
					<input class="uni-input" type="number" v-model="listPrice" placeholder="请输入金额" />
				</view>
			</view>
			<view class="border">
			</view>
			<view class="text">
				卡内余额</text><text style="color: red;font-size: 35rpx;">￥ {{ residuePrice||0 }}</text>
			</view>
		</view>

		<view class="body">
			<!-- <radio-group name="radio" @change="radioChange"> -->
			<view class="body-text">
				选择金额
				<!-- <text style="margin-left: 20rpx;font-size: 35rpx;">卡内余额</text><text style="color: red;font-size: 35rpx;">￥ {{ residuePrice||0 }}</text> -->
			</view>
			<view class="body-price">
				<view class="body-price-radio" v-for="item, index in prices" :key="index" @click="pricesSelect(item)"
					:class="{ 'click-background': item.id == newButton }">
					<text>{{ item.price }}元</text>
				</view>
			</view>
			<!-- </radio-group> -->
		</view>

		<view class="pay">
			<view class="pay-text">
				<text>支付方式</text>
			</view>
			<view class="pay-right">
				<view class="icon">
					<img src="../../static/caricon.png">
				</view>
				<view class="text">
					<text>金福提货券支付</text>
				</view>
			</view>
		</view>

		<view class="bottom" @click="recharge">
			<text>立即充值</text>
		</view>
	</view>
</template>

<script>
export default {
	
	data() {
		return {
			residuePrice: 0,
			listPrice: '',
			money: '',
			card_no: '',
			card_pin: '',
			prices: [
				{
					id: 1,
					value: '1',
					price: 50
				},
				{
					id: 2,
					value: '2',
					price: 100
				},
				{
					id: 3,
					value: '3',
					price: 200
				},
				{
					id: 4,
					value: '4',
					price: 300
				},
				{
					id: 5,
					value: '5',
					price: 500
				},
				{
					id: 6,
					value: '6',
					price: 1000
				}
			],
			newButton: 0
		};
	},
	onLoad(option) {
		var tabData = JSON.parse(decodeURIComponent(option.a))
		console.log(tabData,'res')
		this.residuePrice = tabData.a
		this.card_no = tabData.b
		this.card_pin = tabData.c
	},
	methods: {
		pricesSelect(e) {
			let count = this.prices
			this.listPrice = e.price//listPrice
			this.money = e.price
			this.newButton = e.id
			// count.forEach( res => {
			// 	unitprice = res.price
			// })
			console.log(e, '.....eeee')
		},
		recharge() {
			let unitprice = 0
			if (this.listPrice == 0||!this.listPrice) {
				unitprice = this.listPrice
			} else {
				unitprice = this.listPrice
			}
			if(this.unitprice == 0||!this.listPrice) {
				uni.showToast({
					title: '请输入正确的金额',
					icon: 'none'
				})
				return
			}
			if(this.unitprice>this.residuePrice) {
				uni.showToast({
					title: '余额不足',
					icon: 'none'
				})
				return
			}	
	
			this.$http({
				url: 'api/Wechat/cardRecharge',
				data: {
					card_no: this.card_no,
					card_pin: this.card_pin,
					money: unitprice
				}

			}).then(res => {
				console.log(res, '...结果')
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
				setTimeout(() => {
					uni.navigateTo({
						url: "/personalData/myBalance/myBalance"
					})
				}, 1000)

			}).catch(err => {
				uni.showToast({
					title: err.msg,
					icon: "none"
				})
				console.log(err, '错误')
			})
			this.listPrice = ''
		}
	}
}
</script>

<style lang="scss" scoped>
.top_up {
	width: 690rpx;
	margin: 20rpx auto 24rpx auto;
	height: 290rpx;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;

	.top {
		padding: 40rpx 0 0 24rpx;
		width: 112rpx;
		height: 28rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
		line-height: 0rpx;
	}

	.money-body {
		display: flex;
		height: 48rpx;
		font-size: 48rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
		line-height: 35rpx;
		margin: 50rpx 0 0 24rpx;

		.input {
			height: 28rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #888888;
			margin-left: 18rpx;
		}
	}

	.border {
		width: 642rpx;
		height: 1rpx;
		background: #ECECEC;
		opacity: 1;
		margin: 28rpx 24rpx 34rpx;
	}

	.text {
		height: 26rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #555555;
		line-height: 26rpx;
		margin: 28rpx 0rpx 0 26rpx;
	}
}

.body {
	width: 690rpx;
	height: 328rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: 20rpx 0 0 30rpx;

	.body-text {
		padding: 40rpx 0 0 24rpx;
		// width: 112rpx;
		height: 28rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
		line-height: 30rpx;
	}

	.body-price {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin: 10rpx 0 0 30rpx;

		.click-background {

			width: 182rpx;
			height: 76rpx;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			opacity: 1;
			border: 2rpx solid #F99529 !important;
			z-index: 999;
		}

		.body-price-radio {
			margin-top: 30rpx;
			width: 182rpx;
			height: 76rpx;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			opacity: 1;
			border: 2rpx solid #707070;
			text-align: center;

			text {
				width: 60rpx;
				height: 28rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
				line-height: 76rpx;
			}
		}
	}
}

.pay {
	display: flex;
	justify-content: space-between;
	width: 690rpx;
	height: 108rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: 20rpx 0 120rpx 30rpx;

	.pay-text {
		padding: 40rpx 0 0 24rpx;
	}

	.pay-right {
		display: flex;

		.icon {
			img {
				width: 46rpx;
				height: 46rpx;
				margin: 36rpx 30rpx;
			}
		}

		.text {
			width: 196rpx;
			height: 28rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			padding: 40rpx 24rpx 0 0;
		}

	}
}

.bottom {
	width: 690rpx;
	height: 96rpx;
	background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
	border-radius: 83rpx 83rpx 83rpx 83rpx;
	opacity: 1;
	margin-left: 30rpx;
	text-align: center;
	line-height: 96rpx;

	text {
		width: 144rpx;
		height: 36rpx;
		font-size: 36rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 40rpx;
	}
}
</style>
